<script setup>


import {useUserStore} from "@/stores/UserStore.js";
import axios from "axios";
import {ref} from "vue";
import SettingHeader from "@/components/SettingHeader.vue";

const userStore = useUserStore()

function copyToClipboard(cdk) {
  // 使用Clipboard API复制文本
  navigator.clipboard.writeText(cdk);
}

const List = ref([])
axios.get('http://localhost:8081/Shop/v1/user', {
  params: {id: userStore.getUserInfo.id}
}).then(res => {
  List.value = res.data
  console.log(res.data)
})
console.log(List)
const title = '已购买的游戏'

const FT = (OD) => {
  const date = new Date(OD)
  return date.toLocaleString("zh-CN", {hour12: false}).replace(/\//g, "-")
}
</script>

<template>
  <SettingHeader :url = "{name:'shop'}" :title = "title" />
  <div class = " p-2" v-for = "item in List" :key = "item.id">
    <div class = "ti">
      <span class = "name ">{{ item.ShopName }}</span> <span
        class = "zf">{{ Number(item.shopStatus) === 0 ? '未支付' : '已支付' }}</span>
    </div>
    <div class = "p-2 key"><span>CDK:&nbsp;</span><span class = "cdk-text">{{
        item.cdk || 'CDK未出库'
      }}</span>
      <svg @click = "copyToClipboard(item.cdk)" t = "1740553132067" class = "icon"
           viewBox = "0 0 1024 1024" version = "1.1"
           xmlns = "http://www.w3.org/2000/svg" p-id = "4568" width = "32" height = "32">
        <path
            d = "M394.666667 106.666667h448a74.666667 74.666667 0 0 1 74.666666 74.666666v448a74.666667 74.666667 0 0 1-74.666666 74.666667H394.666667a74.666667 74.666667 0 0 1-74.666667-74.666667V181.333333a74.666667 74.666667 0 0 1 74.666667-74.666666z m0 64a10.666667 10.666667 0 0 0-10.666667 10.666666v448a10.666667 10.666667 0 0 0 10.666667 10.666667h448a10.666667 10.666667 0 0 0 10.666666-10.666667V181.333333a10.666667 10.666667 0 0 0-10.666666-10.666666H394.666667z m245.333333 597.333333a32 32 0 0 1 64 0v74.666667a74.666667 74.666667 0 0 1-74.666667 74.666666H181.333333a74.666667 74.666667 0 0 1-74.666666-74.666666V394.666667a74.666667 74.666667 0 0 1 74.666666-74.666667h74.666667a32 32 0 0 1 0 64h-74.666667a10.666667 10.666667 0 0 0-10.666666 10.666667v448a10.666667 10.666667 0 0 0 10.666666 10.666666h448a10.666667 10.666667 0 0 0 10.666667-10.666666v-74.666667z"
            fill = "#000000" p-id = "4569"></path>
      </svg>
    </div>
    <div class = "p-1">{{ FT(item.creatTime) }}</div>
  </div>
</template>

<style scoped>
span {
  display: inline-block;
}

.ti {
  position: relative;
}

.ti span:last-child {
  position: absolute;
  right: 0;
}

.ti span:first-child {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.key {
  position: relative;
  background-color: rgba(128, 128, 128, 0.4);
  font-size: 16px;
  color: black;
}

.icon {
  position: absolute;
  right: 6px;
  top: 5px;
  cursor: pointer;
}
</style>